<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            width: 700px;

            border: 1px solid #000;
            border-collapse: collapse;
            text-align: center;

        }

        td {
            height: 50px;
            border: 1px solid #000;
        }
    </style>
    <script src="../js/jquery1.11.3.js"></script>
</head>

<body>
    <label> 行数<input type="text" class="row"></label>
    <label> 列数<input type="text" class="col"></label>
    <button class="btn">创建表格</button>
    <table cellspacing="0" cellpadding="0"></table>



    <script>


        // 定义[min,max)随机数
        let rand = function (min, max) {
            return Math.floor(Math.random() * (max - min) + min)
        }
        // 定义16位颜色 #df1064
        let str = '0123456789abcdef'
        let len = str.length
        let randomColor = function () {
            let s = '#'
            for (let i = 0; i < 6; i++) {
                s += str.charAt(rand(0, len))
            }
            return s
        }

        $('.btn').click(function () {
            let row = parseInt($('.row').val())
            let col = parseInt($('.col').val())
            // let $frg = $(document.createDocumentFragment())
            for (let i = 0; i < row; i++) {
                let tdStr = ''
                for (let j = 0; j < col; j++) {
                    let tempcolor = randomColor()
                    tdStr += `<td style="background:${tempcolor} ">${tempcolor}</td>`
                }
                tdStr += '<td><a href="javaciript:">删除</a></td>'
                $('table').append($('<tr></tr>').html(tdStr))
            }
            // 事件委托
            $('tr').click(function (e) {
                if (e.target.tagName.toLowerCase() == 'a') {
                    $(this).remove() 
                }

            })
        })

    </script>
</body>

</html>